<template>
  <div class="index">
    <h1>Demo</h1>
    <van-cell title="单元格" value="内容" size="large"></van-cell>
    <van-cell title="单元格" value="内容" label="描述信息"></van-cell>
    <van-button type="primary">button</van-button>
    <van-button type="default">button</van-button>
    <van-cell-group >
      <van-cell title="单元格" value="内容" is-link></van-cell>
      <van-cell title="商品" value="内容" label="goto商品页面" is-link to="/goods"></van-cell>
    </van-cell-group>
    <van-button type="primary">button</van-button>
    <van-cell-group title="分组1">
      <van-cell title="单元格" value="内容" is-link></van-cell>
      <van-cell title="商品" value="内容" label="goto商品页面" is-link to="/goods"></van-cell>
    </van-cell-group>
    <van-cell-group title="分组2">
      <van-cell   >
        <template #title>
          <span class="custom-title">单元格</span>
          <van-tag type="danger">标签</van-tag>
        </template>
        <span class="">内容</span>
        <van-icon 
          name="search"
          style="line-height: inherit;">
        </van-icon>
      </van-cell>
      <van-cell title="商品" value="内容" ></van-cell>
    </van-cell-group>
    <van-row>
      <van-col span="8">span:8</van-col>
      <van-col span="8">span:8</van-col>
      <van-col span="8">span:8</van-col>
      
    </van-row>


  </div>
</template>

<script>
import { 
  Button, Cell, CellGroup, Tag, Icon,
  Row, Col
} from 'vant'

export default {
  components: {
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
  }
}
</script>